<template>
	<div>
		<top show="true" back='true' :title='title' @clickBtn='backClick'></top>
		<div class="lable-keywords">
			<img class="search-img" src="../static/img/search.png" />
			<label><input placeholder="请输入要搜索的地址" v-model="keyword"></label>
		</div>
		<!-- <label>地区：<input v-model="this.$store.state.city"></label> -->
		<baidu-map :center="{lng:this.$store.state.longitude,lat:this.$store.state.latitude}" :zoom="zoom">
			<bm-view style='height: 300px;' class="map"></bm-view>
			<bm-local-search :keyword="keyword" :auto-viewport="true" :location="this.$store.state.city" @infohtmlset='infohtmlset'></bm-local-search>
		</baidu-map>
	</div>
</template>

<script>
	import top from '@/components/top.vue'; //top组件
	export default {
		components: {
			top
		},
		data() {
			return {
				location: '',
				keyword: '',
				zoom: 15,
				title: '地图',
				center: {

				}
			}
		},
		beforeCreate() {
			this.center = this.$route.query.center;
			this.location = this.$route.query.city;
			console.log(this.$route)
		},
		methods: {
			infohtmlset(e) {
				let that = this;
				that.$store.state.area = e.title
				console.log(e.title)
				console.log(e.city)
				console.log(e.point)
				console.log(e.province)

			},
			backClick() {

			}
		}
	}
</script>

<style lang="scss">
	@import '../assets/scss/main.scss';

	.lable-keywords {
		display: block;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.search-img {
		width: px2vw(20);
		height: px2vw(20);
		display: block;
		margin-right: 10px;
	}
</style>
